<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        表单收集用户输入数据，注意区分 form  from
        action 提交路径，给地址
        method 提交方法 get post ，安全性 get<post、字节数大小 get<post

        交互 label 表单控件 绑定，更易操作
     -->
    <form action="#" method="">
        <!-- 文本框 -->
        <label for="username">账号：</label>
        <input type="text" placeholder="请输入账号" id="username">

        <br>
        密码：
        <input type="password">

        <br>

        <!-- 按钮 后两种是会发起提交的按钮-->
        <input type="button" value="一种按钮">
        <button>两种按钮</button>
        <input type="submit">

        <!-- 单选 name 取值一致设置为一组，实现 n 选1 -->
        男
        <input type="radio" name="gender">
        女
        <input type="radio" name="gender">


        <!-- checked 默认选中 标志性（特殊）属性-->
        底料
        <input type="checkbox" checked>
        鸭肠
        <input type="checkbox">
        毛肚
        <input type="checkbox">
        血旺
        <input type="checkbox">

        <!-- 下拉列表 -->
        <select>
            <option value="">成都</option>
            <option value="">绵阳</option>
            <option value="">广元</option>
        </select>

        <!-- 评价 多行文本框 resize: none; 取消多行文本框的拖拽尺寸功能，宽高自己按稿子要求设置-->
        <textarea></textarea>
    </form>
    <!-- html5新增了 range color email.... -->
</body>

</html>